<template>
    <div class="button__container">
        <n-button type="primary" @click="handlePre" :disabled="stepPreDis">
            <template #icon>
                <n-icon>
                    <ArrowBackSharp />
                </n-icon>
            </template>
        </n-button>
        <p>目前进行中 / 第<span class="processing__text">{{ nowProcess }}</span>步</p>
        <n-button type="primary" @click="handleNext" :disabled="stepNextDis">
            <template #icon>
                <n-icon>
                    <ArrowForwardSharp />
                </n-icon>
            </template>
        </n-button>
        <n-button v-show="props.nowProcess === 4" type="warning" @click="handleImportExcel">导出数据表</n-button>
    </div>
</template>

<script setup lang='ts'>
import { ArrowBackSharp, ArrowForwardSharp } from '@vicons/ionicons5';
import { useMessage, useDialog } from 'naive-ui';
const emits = defineEmits(['preClick', 'nextClick','importExcel']);
const props = defineProps({
    validateFunction: {
        type: Function,
        required: true
    },
    revokeWarningText: {
        type: String,
        default: '您确定撤回吗？'
    },
    nowProcess:{
        type:Number,
        required:true
    }
})
const message = useMessage();
const dialog = useDialog()
const stepPreDis = computed(() => {
    return props.nowProcess === 1;
});
const stepNextDis = computed(() => {
    return props.nowProcess === 4;
});

const handleNext = async () => {
    const { messageText, flag } = await props.validateFunction();
    if (!flag) return message.error(messageText);
    emits('nextClick');
}
const handlePre = () => {
    dialog.warning({
        title: '警告',
        content: props.revokeWarningText,
        positiveText: '确定',
        negativeText: '取消',
        draggable: true,
        onPositiveClick: () => {
            emits('preClick');
        }
    })
}
// 导出数据表
const handleImportExcel = ()=>{
    emits('importExcel');
}
</script>
<style scoped lang='scss'>
.button__container {
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
    background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 背景模糊 */
    -webkit-backdrop-filter: blur(10px); /* 兼容性前缀 */
    border-top: 1px solid #E7E7E7; /* 可选边框 */
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    gap: 1rem;
    .processing__text{
        color:#4090EF;
        font-size: 1rem;
        font-weight: bold;
        margin:0 6px; 
    }
}
</style>